<template>
    <div>
        <div class="tips border-primary j-border-radius-sm  pt-10 pb-10 pl-10 pr-20 mt-10 tipstyle">
            <!-- <i class="icon icon-tips16f j-text-main"></i> -->
            <Iconfont class="icon pt-4 pr-4" type="a-16_f_ic_about" style="color: #2d74ff;"></Iconfont>
            {{ $t('PentaStor 提供 K8s CSI 集成支持服务，可以在下方选择 RBD 或 CephFS 存储池及用户，查看云原生集成信息。') }}
        </div>

        <div class="mt-10">
            <div style="width: 600px;" class="mt-22 ml-22">
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol"
                    :wrapper-col="wrapperCol" labelAlign="left">
                    <!-- <a-spin :spinning="loading"> -->
                    <a-form-model-item :label="$t('存储类型') + ':'" prop="storetype">
                        <a-radio-group v-model:value="form.storetype" @change="handlePool">
                            <a-radio value="rbd">RBD</a-radio>
                            <a-radio value="cephfs">CephFS</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item :label="$t('选择') + $t('文件系统') + ':'" prop="file"
                        v-if="form.storetype == 'cephfs'">
                        <a-select v-model="form.file" :placeholder="$t('Choose') + $t('文件系统')" @change="handleFile" :getPopupContainer="(trigger) => trigger.parentNode">
                            <a-select-option v-for="item of fileList" :value="item.value" :key="item.value">
                                {{ item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <!-- <a-form-model-item :label="$t('选择') + $t('文件系统') + ':'" prop="file" v-if="form.storetype == 'cephfs'">
                            <a-select v-model="form.pool" :placeholder="$t('Choose') + $t('文件')" @change="handleFile">
                                <a-select-option v-for="item of fiileList" :value="item.value" :key="item.value">
                                    {{ item.label }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item> -->
                    <a-form-model-item :label="$t('Pool') + $t('选择') + ':'" prop="pool">
                        <a-select v-model="form.pool" :placeholder="$t('Choose') + $t('Pool')" @change="handleUser" :getPopupContainer="(trigger) => trigger.parentNode">
                            <a-select-option v-for="item of storelist" :value="item.value" :key="item.value">
                                {{ item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$t('User') + $t('选择') + ':'" prop="user">
                        <a-radio-group v-model:value="form.user" @change="handleInput">
                            <a-radio value="olduser">{{ $t('选择') + $t('已有用户') }}</a-radio>
                            <a-radio value="newuser">{{ $t('Create') + $t('新用户') }}</a-radio>
                        </a-radio-group>

                    </a-form-model-item>
                    <a-form-model-item prop="username" style="margin-left: 125px; width: 600px;">
                        <a-select v-model="form.username" :placeholder="$t('Choose') + $t('User')"
                            v-if="form.user == 'olduser'" :getPopupContainer="(trigger) => trigger.parentNode">
                            <a-select-option v-for="item of userlist" :value="item.value" :key="item.value">
                                {{ item.value }}
                            </a-select-option>
                        </a-select>
                        <a-input v-model="form.username" addon-before="client.csi."
                            :placeholder="$t('Enter') + $t('User')" v-if="form.user == 'newuser'"
                            @keydown="handleKeydown" />
                    </a-form-model-item>
                    <!-- </a-spin> -->
                    <a-form-model-item>
                        <a-button type='primary' @click="handleSure">{{ $t('Sure') }}</a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>

            <a-divider />

            <div class="title mt-24">{{ $t('Details') }}</div>
            <div style="border: 0.5px solid gainsboro; box-shadow: 2px 2px 5px #d5d5d5;" class="mt-16 mb-10 mr-10"
                v-if="isShow">
                <div>
                    <div class="ml-16">
                        <!-- <a-spin :spinning="listloading"> -->
                        <a-row :gutter="20" class="mt-24">
                            <a-col :span="2">{{ $t('存储类型') + ':' }}</a-col>
                            <a-col :span="7">{{ storage_type }}</a-col>
                            <a-col :span="2" v-if="storage_type == 'rbd'">{{ $t('Store-pool-name') + ':' }}</a-col>
                            <a-col :span="4" v-else>{{ $t('文件系统') + $t('名称') + '/' + $t('Store-pool-name') + ':'
                                }}</a-col>
                            <a-col :span="7" v-if="storage_type == 'rbd'">{{ pool_name }}</a-col>
                            <a-col :span="7" v-else>{{ fs_name + '/' + pool_name }}</a-col>

                        </a-row>
                        <a-row :gutter="20" class="mt-16">
                            <a-col :span="2">{{ $t('Username') + ':' }}</a-col>
                            <a-col :span="7">{{ username }}</a-col>
                            <a-col :span="storage_type == 'rbd' ? 2 : 4 ">{{ 'userid' + ':' }}</a-col>
                            <a-col :span="7">{{ userid }}</a-col>
                        </a-row>
                        <a-row :gutter="20" class="mt-16">
                            <a-col :span="2">{{ 'userkey' + ':' }}</a-col>
                            <a-col :span="7">{{ userkey }}</a-col>
                            <a-col :span="storage_type == 'rbd' ? 2 : 4 ">{{ 'Cluster ID' + ':' }}</a-col>
                            <a-col :span="7">{{ cluster_id }}</a-col>
                        </a-row>
                        <!-- </a-spin> -->
                    </div>

                    <div>
                        <div class="mt-24 ml-16">{{ 'Monitor IP ' + $t('列表') + ':' }}</div>
                        <a-table class="mt-16 ml-16" rowKey="id" :columns='columns' :loading="loading"
                            :dataSource='dataList' :locale="defaultSetting" size='small' :pagination="false"
                            style="width: 900px;">

                        </a-table>
                    </div>

                    <div class="mt-16">
                        <!-- <a-spin :spinning="listloading"> -->
                        <div class="ml-16">
                            <span class="mr-16">{{ '/etc/ceph/ceph.conf ' + $t('File') + ':' }}</span>
                            <a @click="copyText">{{ $t('Copy') + $t('File') + $t('内容') }}</a>
                        </div>
                        <div style="border: 0.5px solid gainsboro; height: 220px; overflow-y: scroll; width: 900px;"
                            class="ml-16 mr-16 mt-8 mb-10">
                            <div class="mt-8 ml-8" style="white-space: pre-wrap;">{{ filecontent }}</div>
                        </div>
                        <!-- </a-spin> -->
                    </div>

                </div>

            </div>
            <div v-else class="mt-24 ml-8 mb-10" style="height: 220px; ">{{ detail }}</div>


        </div>

    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'


export default {
    name: '',
    components: {},
    data() {
        return {
            loading: false,
            isShow: false,
            detail: '暂无数据',
            storage_type: '',
            fs_name: '',
            pool_name: '',
            username: '',
            userid: '',
            userkey: '',
            cluster_id: '',
            filecontent: '',
            labelCol: { span: 5 },
            wrapperCol: { span: 17 },
            form: {
                storetype: 'rbd',
                file: '',
                pool: '',
                user: 'olduser',
                username: '',
            },
            storelist: [],
            fileList: [{ value: 'pentastor', label: 'pentastor' }],
            userlist: [],
            defaultSetting: { emptyText: <EmptyData /> },
            rules: {

                storetype: [
                    { required: true, message: this.$t('Choose') + this.$t('存储类型'), trigger: 'change' },
                ],
                pool: [
                    { required: true, message: this.$t('Choose') + this.$t('存储池'), trigger: 'change' },
                ],
                user: [
                    { required: true, message: this.$t('Choose') + this.$t('用户'), trigger: 'change' },
                ],
                username: [
                    { required: true, message: this.$t('请进行用户选择'), trigger: 'change' },
                ],
                file: [
                    { required: true, message: this.$t('Choose') + this.$t('文件系统'), trigger: 'change' },
                ],
            },


            columns: [
                { title: this.$t('Monitor IP'), dataIndex: 'mon_ips', key: 'mon_ips', width: 180, fixed: 'left', scopedSlots: { customRender: 'address' } },
            ],

            dataList: [],

            // listloading: false,

        }
    },

    watch: {
        "form.user": function (val) {
            if (val) this.form.username = ''
            // this.form.resetFields('username')
        },

    },


    mounted() {
        this.handlePool()
    },

    methods: {
        async handlePool() {
            this.form.pool = ''
            this.form.username = null
            this.form.file = ''
            this.$refs.ruleForm.clearValidate()
            this.storelist = []
            this.userlist = []
            if (this.form.storetype == 'rbd') {
                const params = {
                    applications: [this.form.storetype]
                };
                const { data } = await this.$api.alarm.getPoolInfoAll(params)
                this.storelist = data.map(item => ({ value: item.poolname, label: item.poolname }))
                // this.form.pool = this.storelist[0].label

            }


        },
        async handleFile() {
            if (this.form.file == 'pentastor') {
                const { data } = await this.$api.alarm.getCephfs()
                this.storelist = data.pentastor.map(item => ({ value: item, label: item }))
            }

        },

        async handleUser() {
            this.form.username = ''
            // const poolname = this.storelist.find(item => { return item.value === val })
            // console.log("name", poolname.label)
            // const pool_name = this.form.pool
            let params = {}
            if (this.form.storetype == 'rbd') {
                params = {
                    pool_name: this.form.pool,
                    storage_type: this.form.storetype,
                }
            } else {
                params = {
                    pool_name: this.form.pool,
                    storage_type: this.form.storetype,
                    system_name: this.form.file
                }
            }
            const { data } = await this.$api.alarm.getcisUser(params)
            // this.model(data.id) //返回模板
            // this.notice(data.id, data.params, data.flag) //通知列表显示
            this.userlist = data.map(item => ({ value: item, label: item }))
            // if (this.form.user == 'olduser') this.form.username = this.userlist[0].label

        },
        handleInput() {
            this.$refs.ruleForm.clearValidate('username')
            if (this.form.user === 'olduser') {
                this.$set(this.rules, 'username', [
                    { required: true, message: this.$t('请进行用户选择'), trigger: 'change' },
                ])
            } else {
                this.$set(this.rules, 'username', [
                    { required: true, message: this.$t('Enter') + this.$t('新用户名'), trigger: 'blur', whitespace: true },
                ])
            }
            console.log("Formuser", this.form.user)
        },
        handleKeydown(event) {
            if (event.key === ' ') {
                event.preventDefault();
            }
        },

        async handleSure() {

            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    let lastusername = ''
                    if (this.form.user == 'newuser') lastusername = 'client.csi.' + this.form.username
                    else lastusername = this.form.username

                    let params = {}
                    if (this.form.storetype == 'rbd') {
                        this.form.file = undefined
                        params = {
                            ceph_username: lastusername,
                            storage_type: this.form.storetype,
                            pool_name: this.form.pool,
                        }
                    } else {
                        params = {
                            ceph_username: lastusername,
                            storage_type: this.form.storetype,
                            pool_name: this.form.pool,
                            system_name: this.form.file
                        }
                    }
                    this.loading = true
                    // this.listloading = true
                    const { data } = await this.$api.alarm.getcsiDetail(params)
                    if (data.flag != 1) {
                        this.isShow = true
                        this.listloading = false
                        if (data.storage_type == 'cephfs') {
                            this.fs_name = data.fs_name
                        }
                        this.storage_type = data.storage_type,
                            this.pool_name = data.pool_name,
                            this.username = data.username,
                            this.userid = data.id,
                            this.userkey = data.key,
                            this.cluster_id = data.cluster_id,
                            this.dataList = data.mon_ips.map(item => ({ mon_ips: item })),
                            this.filecontent = data.ceph_conf,
                            this.loading = false
                    } else {
                        this.isShow = false
                        this.model(data.id) //返回模板
                        this.notice(data.id, data.params, data.flag) //通知列表显示
                        return false
                    }
                }
                this.loading = false
                // this.listloading = false



            });
        },

        // handleCancel() {
        //     this.$refs['ruleForm'].resetFields();
        // },

        copyText() {
            if (navigator.clipboard && window.isSecureContext) {
                // navigator clipboard 向剪贴板写文本
                this.$message.success('复制成功')
                return navigator.clipboard.writeText(this.filecontent)
            } else {
                // 创建text area
                const textArea = document.createElement('textarea')
                textArea.value = this.filecontent
                // 使text area不在viewport，同时设置不可见
                document.body.appendChild(textArea)
                textArea.focus()
                textArea.select()
                this.$message.success('复制成功')
                return new Promise((res, rej) => {
                    // 执行复制命令并移除文本框
                    document.execCommand('copy') ? res() : rej()
                    textArea.remove()
                })
            }
            // // 使用 Clipboard API 复制文本
            // navigator.clipboard.writeText(this.filecontent).then(() => {
            //     // this.$alert('文本已复制到剪贴板');
            // }).catch(err => {
            //     console.error('复制失败:', err);
            //     // this.$alert('复制失败');
            // });
        }

    }
}
</script>

<style scoped>
.title {
    border-left: 3px solid #3590eb;
    padding-left: 8px;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
}

.tipstyle {
    background-color: #cad5ff;
    border-color: #8ca3ff;
}
</style>